<template>
    <div class="header-button container">
        <div class="rolemanageMentMain">
            <el-input
                v-model="searchKey"
                placeholder="请输入内容"
                size="small"
                style="margin-bottom: 16px;"
            ></el-input>
            <el-table
                :data="tableData"
                width="100%"
                border
                highlight-current-row
                @row-click="handleSelectRow"
                stripe
                class="heard-bg"
            >
                <el-table-column label="选择" width="50">
                    <template slot-scope="scope">
                        <span>
                            <el-radio
                                v-model="currentRowId"
                                :ref="scope.row.id"
                                :label="scope.row.id"
                            ></el-radio>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="CTI工号" prop="agentId"></el-table-column>
                <el-table-column label="分机号" prop="extNo"></el-table-column>
                <el-table-column label="坐席工号" prop="loginId"></el-table-column>
                <el-table-column label="坐席姓名" prop="loginName"></el-table-column>
                <!-- <el-table-column label="操作员工号" prop="optNo"></el-table-column> -->
            </el-table>
            <div slot="footer" class="btnBox footer">
                <el-button type="primary" size="small" @click="logout">强制退出</el-button>
                <button id="idleBtn" onclick="idleClick();">强制就绪</button>
                <el-button type="primary" size="small" @click="disconnectClick();">强制离席</el-button>
                <button id="holdBtn" onclick="holdClick(this.innerHTML);">监听</button>
                <button id="holdBtn" onclick="holdClick(this.innerHTML);">插话</button>
                <button id="holdBtn" onclick="holdClick(this.innerHTML);">拆线</button>
                <button id="hangupBtn" onclick="hangupClick();">强制挂断</button>
            </div>
        </div>
    </div>
</template>
<script>
// import Pagination from '@/components/Pagination/Pagination.vue';
import { removeToken, removeTokenToname } from '@/utils/auth';
export default {
    name: 'custMonitor',
    components: {
        // Pagination,
    },

    data() {
        return {
            searchKey: '',
            // 当前页码
            currentPage: 0,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            skillGroupDialogShowFlag: false, // 技能组列表展示弹框显示控制阀
            currentRowData: '', // 当前选择的技能组数据
            currentRowId: '', // 当前选择技能组的id
            agentDialogShowFlag: false, // 坐席选择弹框显示控制阀
            loginAgentList: [], // 坐席选择列表
            currentType: 1, // 当前类型
        };
    },
    created() { },
    computed: {
        tableData() {
            const search = this.searchKey;
            if (search) {
                return this.loginAgentList.filter(data => Object.keys(data).some(key => String(data[key]).toLocaleLowerCase().indexOf(search) > -1));
            }
            return this.loginAgentList;
        },
    },
    methods: {
        // 强制退出
        logout() {
            this.$confirm('确认强制退出？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    if (top.softphone) {
                        if ($('#loginOrLogoutBtn').text() === '签出') {
                            top.softphone.disconnectBtnClick();
                        }
                    }
                    this.$post.user.logout().then((res) => {
                        if (res.data.success) {
                            this.$message.success('退出成功!');
                            sessionStorage.clear();
                            localStorage.clear();
                            Cookies.clear();
                            // removeToken();
                            // removeTokenToname();
                            this.$router.push({
                                // 跳转到登陆页面
                                name: 'Login',
                            });
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                })
                .catch(() => {
                });
        },
        // 强制离席 指未就绪
        disconnectClick() {
            top.softphone.disconnectBtnClick();
        },
        // 点击显示坐席选择列表
        transferAgent(type) {
            // if (!this.loginAgentList.length) {
            const loginAgentList = top.softphone.getAllLoginAgentList() || [];
            loginAgentList.forEach((item, index) => {
                item.id = index + 1;
            });
            this.loginAgentList = loginAgentList;
            // }
            this.agentDialogShowFlag = true;
            this.currentType = type === 'agent' ? 2 : 3;
        },
        // 选择表格行
        handleSelectRow(row) {
            this.currentRowData = row;
            this.currentRowId = row.id;
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            // this.transferSkillGroup();
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            // this.transferSkillGroup();
        },
        // 技能组确认选择
        handleConfirm(tips) {
            if (!this.currentRowId) {
                this.$alert(tips, '提示');
            } else {
                const type = this.currentType;
                if (type === 1) { // 技能组选择
                    const groupNum = this.currentRowData.label.split('#')[1];
                    console.log(groupNum, 'groupNum');
                    top.softphone.tranferSkillNoBtnClick(groupNum);
                } else if (type === 2) { // 坐席选择
                    const { agentId } = this.currentRowData;
                    console.log(agentId, 'agentId');
                    top.softphone.tranferAgentBtnClick(agentId);
                } else if (type === 3) { // 会议
                    const { agentId } = this.currentRowData;
                    console.log(agentId, 'agentId');
                    top.softphone.conferenceAgentBtnClick(agentId);
                }
                this.handleClose();
            }
        },
        // 弹框关闭
        handleClose() {
            this.skillGroupDialogShowFlag = false;
            this.agentDialogShowFlag = false;
            this.currentRowId = '';
            this.currentRowData = {};
        },
    },
};
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    .rolemanageMentMain {
        width: 100%;
        background: #fff;
        margin: 0 0 15px;
        // border-radius:5px;
        padding: 20px;
        box-sizing: border-box;
        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
            float: left;
        }
    }
}
.header-button {
    width: 100%;
    .btnBox {
        display: flex;
        margin-top: 13px;
        // background-color: #fff;
        input:disabled,
        select:disabled {
            background: #f5f7fa;
            border-color: #e4e7ed;
            color: #c0c4cc;
            cursor: not-allowed;
        }
        select {
            border-radius: 4px;
        }
        button {
            height: 32px;
            padding: 0 4px;
            margin: 0 5px;
            background: #409eff;
            outline: none;
            border: 1px solid #409eff;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            i {
                position: absolute;
                width: 20px;
                height: 25px;
                left: 8px;
                top: 2px;
                // vertical-align: sub;
            }
            &.el-button-smell {
                width: 85px;
            }
        }
        button:disabled {
            color: #fff;
            background: #a0cfff;
            border: 1px solid #a0cfff;
            cursor: not-allowed;
        }
    }
    .footer {
        text-align: center;
        display: inline-flex;
        button {
            padding: 0 14px;
        }
    }
}
</style>
